<template>
	<view class="login">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">登录</block>
		</cu-custom>
		<form>
			<view class="cu-item arrow">
				<view class="content">
					<view class="cu-form-group margin-top">
						<text class="title cuIcon-peoplefill text-blue"></text>
						<text class="title text-blue"></text>
						<input placeholder="请输入用户名" v-model="userInfo.name"></input>
					</view>
					<view class="cu-form-group">
						<text class="title cuIcon-keyboard text-blue"></text>
						<text class="title text-blue"></text>
						<input placeholder="请输入密码" type="password" v-model="userInfo.password"></input>
					</view>
					<view class="cu-form-group flex solid-bottom padding justify-around">
						<button class="cu-btn block bg-blue margin-tb-sm lg" v-if="isLogin" @click="login">登录</button>
						<button class="cu-btn block bg-blue margin-tb-sm lg" v-else>
							<text class="cuIcon-loading2 cuIconfont-spin"></text>正在登录
						</button>
						<button class="cu-btn block bg-red margin-tb-sm lg" @click="reset">重置</button>
						<button class="cu-btn block bg-green margin-tb-sm lg" @click="backToMine">返回</button>
					</view>
				</view>
				
			</view>	
		</form>
	</view>
</template>

<script>
	export default {
		name: 'Login',
		data() {
			return {
				userInfo: {
					name: '',
					password: ''
				},
				isLogin: true
			}
		},
		methods: {
			reset() {
				this.userInfo = {
					name: '',
					password: ''
				}
				this.isLogin = true
			},
			backToMine(){
				uni.switchTab({
					url:'../mine/mine'
				})
			},
			login() {
				let empty = this.userInfo.name == '' || this.userInfo.password == '';
				if (empty) {
					uni.showToast({
						title: '输入不能为空！'
					});
				} else {
					uni.request({
						url: 'http://123.57.7.108:2048/emall/login', //仅为示例，并非真实接口地址。
						data: {
							username: this.userInfo.name,
							password: this.userInfo.password
						},
						method: 'POST',
						success: (res) => {
							if (res.data.code == 200) {
								uni.showToast({
									title: `${res.data.message}`
								});
								uni.setStorage({ //存储用户信息
									key: "user",
									data: res.data.data.user
								})
								uni.setStorage({ //异步存储token
									key: 'token',
									data: res.data.data.token
								});
								uni.setStorage({ //保存token头
									key: 'tokenHead',
									data: res.data.data.tokenHead
								});
								uni.setStorage({ //保存token请求头
									key: 'tokenHeadName',
									data: res.data.data.tokenHeaderName
								})
								
								this.isLogin = false;
								setTimeout(function() {
									uni.switchTab({
										url: "../mine/mine"
									})
								}, 1000);
							} else {
								uni.showToast({
									title: `${res.data.message}`
								});
							}
						},
						fail: (res) => {
							uni.showToast({
								title: `${res.data.message}`
							})

						}
					});
				}
			}
		}
	}
</script>

<style scope>
	.login {
		width: 100%;
	}

	.login form {
		width: 80%;
	}
</style>
